<template>
  <viewer ref="viewer" :images="fileList">
    <el-upload
      :disabled="disabled"
      :action="params.action"
      :data="params.data"
      :file-list="fileList"
      :on-preview="downloadFile"
      :on-success="uploadOnSuccess"
      :on-remove="deleteFile"
      :before-remove="handleFileRemoveConfirm"
      :limit="limit"
      :multiple="true"
      :on-exceed="handleExceed"
      class="upload-demo"
      name="dmsFile"
      list-type="picture">
      <el-button v-if="!disabled" size="small" type="primary">{{ text }}</el-button>
    </el-upload>
  </viewer>
</template>

<script>
// import { delFile, getFiles } from '@/api/common'
// import { matchType } from '@/utils'
import SERVER from '@/api/server'
import { queryFile, deleteById } from '@/api/basedata/file'
export default {
  name: 'UploadList',
  props: {
    billId: {
      type: String,
      default: ''
    },
    billType: {
      type: [String, Number],
      required: true
    },
    disabled: false,
    limit: {
      type: Number
    },
    text: {
      type: String,
      default: '点击上传'
    },
    tip: ''
  },
  data() {
    return {
      progress: 0, // 上传进度
      pass: null, // 是否上传成功
      isEnlargeImage: false, // 放大图片
      enlargeImage: '', // 放大图片地址
      fileList: [],
      params: {
        action: `${SERVER.DMSCLOUD_BASEDATA}/file/save/${this.$props.billType}`,
        data: {
          billId: '',
          billType: ''
        }
      },
      attachment: []
    }
  },
  watch: {
    attachment: {
      handler: function(newVal, oldVal) {
        this.$emit('listenFile', this.billId && this.billType ? '' : this.attachment.join(',;'), this.billType, this.billId)
      },
      deep: true
    },
    billId: {
      handler(val, oldVal) {
        if (val && val !== oldVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.params.data.billId = this.billId
      this.params.data.billType = this.billType
      if (this.billId && this.billType) {
        queryFile(this.billType, this.billId).then(response => {
          const fileList = response.initialPreviewConfig || []
          if (fileList.length > 0) {
            fileList.forEach(el => {
              const obj = {}
              this.$set(obj, 'key', el.key)
              this.$set(obj, 'name', el.caption)
              this.$set(obj, 'billType', this.billType)
              this.$set(obj, 'billId', this.billId)
              this.$set(obj, 'url', `${SERVER.DMSCLOUD_BASEDATA}/file/billFilesDownload/${this.billType}/${el.key}`)
              this.fileList.push(obj)
              this.attachment.push(el.key)
            })
          }
        })
      }
    },
    uploadOnSuccess(e, file, fileList) { // 上传附件
      this.$set(file, 'key', e.fileUploadId)
      this.fileList.push(file)
      this.attachment.push(e.fileUploadId)
    },
    handleFileRemoveConfirm(file, fileList) {
      return new Promise((resolve, reject) => {
        this.$confirm('是否删除此附件？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resolve(true)
        }).catch(() => {
          // eslint-disable-next-line prefer-promise-reject-errors
          reject(false)
        })
      })
    },
    deleteFile(file, fileList) {
      this.fileList = fileList
      if (file.key) {
        deleteById(file.key).then(() => {
          this.$message.success('附件删除成功')
          this.attachment.splice(this.attachment.indexOf(file.key), 1)
        })
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制最多只能上传 ${this.limit} 个文件!`)
    },
    downloadFile(file) {
      window.location.href = file.url
    }
  }
}
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }

  .img-list {
    overflow: hidden;
    width: 100%;
  }

  .img-list .img-content {
    /* float: left; */
    text-align: left;
    position: relative;
    display: inline-block;
    width: 200px;
    height: 245px;
    padding: 5px;
    margin: 5px 20px 20px 0;
    border: 1px solid #d1dbe5;
    border-radius: 4px;
    transition: all .3s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
  }

  .img-list .img-upload {
    float: left;
    width: 200px;
    height: 270px;
    display: table;
    text-align: center;
  }

  .img-list .uploader {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
  }

  .img-list .img-progress {
    text-align: center;
    padding-top: 50px;
  }

  .img-list .img-content img {
    display: block;
    width: 100%;
    height: 190px;
    margin: 0 auto;
    border-radius: 4px;
  }

  .img-list .img-content .doc-info {
    display: block;
    width: 100%;
    height: 190px;
    margin: 0 auto;
    border-radius: 4px;
    border: 1px dashed #c0ccda;
    text-align: center;
  }

  .img-list .img-content .doc-info i {
    margin-top: 60px;
  }

  .img-list .img-content .name {
    margin-top: 10px;
  }

  .img-list .img-content .name > div {
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 25px;
    line-height: 25px;
  }

  .img-list .img-content:hover .del,
  .img-list .img-content:hover .layer {
    opacity: 1;
  }

  .img-list .img-content .del,
  .img-list .img-content .layer {
    opacity: 0;
    transition: all .3s;
  }

  .img-list .img-content .del {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #8492a6;
    cursor: pointer;
    font-size: 1.1em;
  }

  .img-list .img-content .layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200px;
    color: #fff;
    text-align: center;
    z-index: 5;
    background-color: rgba(0, 0, 0, .4);
  }

  .img-list .img-content .layer i {
    font-size: 1.6em;
    margin-top: 80px;
  }
</style>
